import { createElement, serializeLabel, map } from '../../utils'

export default (expression: any, { metadata }: any) => {
  const { inputs, stops, min, max } = expression
  const gradient = stops.map(
    ([value, color]: any) => `${color} ${map(value, min, max)}%`
  )
  return createElement('div', {
    classes: 'gradient',
    content: [
      createElement('p', {
        classes: 'labels',
        content: inputs
          .filter(
            (input: any, index: number) =>
              index === 0 || index === inputs.length - 1
          )
          .map((input: any) =>
            createElement('span', {
              styles: { left: `${map(input, min, max)}%` },
              content: serializeLabel(input, metadata),
            })
          ),
      }),
      createElement('div', {
        classes: 'bar',
        styles: { 'background-image': `linear-gradient(90deg, ${gradient})` },
      }),
    ],
  })
}
